<template>
  <div class="asset">
    <Header title="我的资产"/>
    <main class="asset-main">
      <div class="asset-account-summary">
        <span>资产</span>
        <div class="asset-account-summary-amount">
          {{ getAssetSummary }}
        </div>
      </div>
      <div
        v-for="account in getAssetAccountList" 
        :key="account.accountId" 
        class="asset-account-item" 
        :style="`background-color:${account.color};`">
        <div class="asset-account-icon" :style="`color:${account.color};`">
          <van-icon :name="account.icon" size="6vw"/>
        </div>
        <div>
          <div class="asset-account-name">
            {{ account.name }}
          </div>
          <div class="asset-account-tips">
            {{ account.tips }}
          </div>
        </div>
        <div class="asset-account-amount">
          {{ getAssetAccountAmount(account.accountId) }}
        </div>
      </div>
      <div @click="addClick" class="asset-account-add-button">
        <van-icon name="plus" />
        <span>添加账户</span>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BillModule, BillType } from '../../store/modules/bill';
import { UserModule, IAssetAccount } from '../../store/modules/user';
import { formatNumber } from '../../utils/formatNumber';
import Header from '../../components/Header/index.vue';

@Component({
  name: 'Asset',
  components: {
    Header,
  },
})
export default class extends Vue {

  private get getAssetAccountList(): IAssetAccount[] {
    return UserModule.userConfig.assetAccountList;
  }
  private get getAssetSummary() {
    const revenue = BillModule.billSummary.reduce((pre, cur) => {
      return pre + cur.revenueSummary;
    }, 0);
    const expense = BillModule.billSummary.reduce((pre, cur) => {
      return pre + cur.expenseSummary;
    }, 0);
    return formatNumber(revenue - expense);
  }
  private get getAssetAccountAmount() {
    return (accountId: number) => {
      const revenue = BillModule.bills.reduce((pre, cur) => {
        if (cur.billType === BillType.Revenue && cur.billAccountId === accountId) {
          return pre + cur.amount;
        } else {
          return pre;
        }
      }, 0);
      const expense = BillModule.bills.reduce((pre, cur) => {
        if (cur.billType === BillType.Expense && cur.billAccountId === accountId) {
          return pre + cur.amount;
        } else {
          return pre;
        }
      }, 0);
      return formatNumber(revenue - expense);
    };
  }

  private addClick() {
    UserModule.toggleIsAddAssetAccountStatus(true);
    const router = '$router';
    this[router].push({ path: 'asset-account-add' });
  }
}

</script>

<style scoped>
.asset {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.asset-main {
  height: 100%;
  width: 100%;
  border-top: 1px solid #D0CECF;
  border-bottom: 1px solid #D0CECF;
  background-color: #F7F7F7;
}
.asset-account-item, .asset-account-add-button, .asset-account-summary {
  position: relative;
  display: flex;
  align-items: center;
  height: 100px;
  padding-left: 20px;
  border-radius: 10px;
  margin: 20px;
}
.asset-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
}
.asset-account-name {
  padding-left: 20px;
  color: white;
}
.asset-account-tips {
  padding-left: 20px;
  color: rgba(255,255,255,0.7);
}
.asset-account-amount {
  position: absolute;
  right: 20px;
  color: white;
}
.asset-account-summary-amount {
  position: absolute;
  right: 20px;
}
.asset-account-summary {
  background-color: white;
  border: 5px solid rgba(237, 237, 237, 0.8);
  color: #ADADAD;
}
.asset-account-add-button {
  background-color: white;
  border: 1px dashed rgba(237, 237, 237, 0.8);
  color: #ADADAD;
}
.asset-account-add-button span {
  padding-left: 20px;
}
</style>
